<template>
  <div class="pagemain">
    <home-banner :rotation="homeData.rotation"></home-banner>
    <home-about :about="homeData.about"></home-about>
    <home-team :team="homeData.team"></home-team>
    <component :is="yearNew" :projects="homeData.projects"></component>
    <component :is="homeNew" :news="homeData.news"></component>
  </div>
</template>

<script>
import HomeBanner from '@/components/homeBanner/homeBanner.vue'
import HomeAbout from '@/components/homeAbout/homeAbout.vue'
import HomeTeam from '@/components/homeTeam/homeTeam.vue'
import HomeYearNews from '@/components/homeYearNews/homeYearNews.vue'
import HomeYearNewsMobile from '@/components/homeYearNews/homeYearNewsMobile'
import HomeNews from '@/components/homeNews/homeNews.vue'
import HomeNewsMobile from '@/components/homeNews/homeNewsMobile.vue'
import { WOW } from 'wowjs'
import { isMobile } from '@/common/util.js'
import { getHomeData } from '@/service/getData.js'
export default {
  name: 'Home',
  components: {
    'home-banner': HomeBanner,
    'home-about': HomeAbout,
    'home-team': HomeTeam
  },
  data() {
    return {
      homeData: {
        rotation: [],
        about: [],
        team: [],
        projects: [],
        news: []
      }
    }
  },
  computed: {
    yearNew() {
      return isMobile() ? HomeYearNewsMobile : HomeYearNews
    },
    homeNew() {
      return isMobile() ? HomeNewsMobile : HomeNews
    }
  },
  mounted() {
    //  new WOW().init() 
    // 动画效果
    if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
      new WOW().init();
    }
    var wow = new WOW({
      boxClass: 'wow',
      animateClass: 'animate',
      offset: 0,
      mobile: true,
      live: true
    });
    wow.init();
    this.getHome()
  },
  methods: {
    async getHome() {
      let res = await getHomeData();
      if (res) {
        this.homeData = res
      }
    }
  }

}
</script>
<style lang="scss" scoped>
</style>

